<template>
  <div class="container">
    <el-row class="">
      <el-col :span="16" align="left">
        <span style="line-height: 33px;">同意票数：{{data.isNum}}票；不同意票数：{{data.isNotNum}}票；</span>
      </el-col>
      <el-col :span="8" align="right">
        <el-input v-model="data.params.exportName" placeholder="专家名称" style="width: 150px; margin-right: 15px" />
        <el-button color="#626aef" @click="search()">筛选</el-button>
      </el-col>
    </el-row>

    <div class="banner">
      <!-- 列表 -->
       <Table class="table_" :operate="true" :tableArr="data.allTableData" :pagination="data.page" :columns="data.columns" :total="data.page.total"
        @delectTable="delectIds"></Table>
      <!-- 分页 -->
      <div class="example-pagination-block">
            <el-pagination
              :current-page="pagination.currentPage"
              :page-size="pagination.pageSize"
              :page-sizes="[10, 20, 30, 40,50,100]"
              background
              layout="prev, pager, next ,total,sizes,jumper"
              :total="data.page.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"/>
      </div>
    </div>
  </div>
</template>

<script>
import { lookResult, } from '@/views/science/api/digit'
import SelectOption from '@/views/science/components/selectOption/index.vue'
import Table from '@/views/science/components/table/table.vue'
import { onMounted, reactive, ref, watch } from 'vue'

export default {
  components: {
    Table,
    SelectOption,
  },
  props:{
    lookId:{
      type:String,
    }
  },
  setup(props,{emit}) {
    const activeName = ref('first')
    const data = reactive({
      agreeWth:0,
      unagreeWth:0,
      allTableData:[],
      ids:[],
      columns:[
        {
          key: "expertName",
          width: 140,
          label: "专家"
        },
        {
          key: "expertType",
          width: 140,
          label: "专家类别"
        },
        {
          key: "expertType",
          width: 140,
          label: "专业类别"
        },
        {
          key: "workUnit",
          width: 140,
          label: "单位名称"
        },
        {
          key: "position",
          width: 140,
          label: "职务"
        },
        {
          key: "conclusion",
          width: 140,
          label: "是否通过"
        },
        {
          key: "expertOpinion",
          width: 140,
          label: "评审意见"
        },
      ],
      page: { page: 1, limit: 10, total: 0 },
      orgAllList:[],//{itemText:1,itemValue:'1'}
      params: {
        exportName: "",
        current: 1,
        size: 10,
        id:''
      },
      isNum:0,
      isNotNum:0,
    })
     //分页器信息
    const pagination = reactive({
      pageSize:10,
      currentPage:1,
    })
    //分页操作
    const handleSizeChange = (val) =>{
      data.params.size = val
      tableList()
    }
    const handleCurrentChange = (val) =>{
      data.params.current = val
      tableList()
    }
    //搜索
    const search = () =>{
      tableList();
    }
    //列表
    const tableList = async () => {
      data.params.id = props.lookId
      let res = await lookResult(data.params)
      if (res.data.success) {
        let records = res.data.data
        let list = res.data.data.records;
/*
        list.forEach(e => {
          Reflect.set(e, 'conclusionName', (e.conclusion==1?'同意': e.conclusion==2?'不同意':''))
        });*/
          list.map((item) => {
          if (item.conclusion == 1) {
            item.conclusion = "同意";
          } else if (item.conclusion == 2) {
            item.conclusion = "不同意";
          }else if (item.expertType == 1) {
            item.expertType = "内部专家";
          }else if (item.expertType == 2) {
            item.expertType = "外部专家";
          }
          });
        console.log(1111,list)
        // data.allTableData = res.data.data.records
        data.allTableData = list
        console.log('data.allTableData',list.length);
        if(list == null || list.length==0){
          data.isNum = 0
          data.isNotNum = 0
          data.page.total = 0
          console.log('data.page.total',data.page.total);
        }else {
          data.isNum = list[0].isNum
          data.isNotNum = list[0].isNotNum
          data.page.total = records.total
          console.log('data.page.total',data.page.total);
        }

      }
    }
    onMounted(() => {
      tableList();
    });

    watch(props.lookId, (newValue, oldValue) => {
      console.log('look watch');
    });

    return{
      activeName,
      pagination,
      data,
      search,
      handleSizeChange,
      handleCurrentChange,
    }
  },
}
</script>

<style lang="scss">
.table_{
  .el-pagination {
      display: none;
    }
}
</style>
<style lang="scss" scoped>
.example-pagination-block {
  margin-top: 15px;
  text-align: center;
}

:deep(.el-pagination .btn-next .el-icon) {
  margin: 0 auto;
}

:deep(.el-pagination .btn-prev .el-icon) {
  margin: 0 auto;
}
.container {
  background-color: white;
  padding: 20px;
}
</style>
